<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>	
	<view class="">
		<view class="topBox">
			<view class="status_bar"></view>
			<uni-nav-bar
				style="width: 750rpx; height: 44px; border-bottom: 1px solid #F2F2F2;"
				@clickRight="showSetUp"
				@clickLeft="goHome"
				color="#FDFDFD"
				:border="false"
				:shadow="false"
				background-color="#CD001B"
			>
				<view class="titleImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/logo_ctw@3x.png"></image></view>
				<view slot="left">
					<view class="leftIconBox"><uni-icons type="arrowleft" color="#000" size="18"></uni-icons></view>
				</view>
				<view slot="right"><uni-icons type="bars" color="#FDFDFD" size="28"></uni-icons></view>
			</uni-nav-bar>
		</view>

		<view class="zhuti" :style="{ marginTop: topBar }">
			<!-- 标题 -->
			<view class="neironBoxTitle">{{ i18n.ctwfont1 }}</view>
			<view class="bigBox">
				<view class="rateTitle">
					<view class="rateTitleL" v-if="TimeisShow">
						<text style="color: #334383;">{{ i18n.ctwfont22 }}</text>
					</view>
					<view class="rateTitleL" v-else>
						<text>{{ i18n.ctwfont2 }}</text>
						<text style="padding: 0 5px;">=</text>
						<text style="color: #334383;">{{ cardArrList[0].exchangeRate1 }} {{ i18n.ctwfont3 }}</text>
					</view>
					<view class="rateTitleR" v-show="!TimeisShow">
						<view>{{ i18n.ctwfont10 }} : {{ disableDate }}</view>
						<view>{{ i18n.ctwfont11 }} : {{ enableDate }}</view>
					</view>
				</view>
				<view class="rateBox">
					<view class="TimeisShowBox" v-if="TimeisShow">
						<text style="color: #fff;">{{ i18n.ctwfont22 }}</text>
					</view>
					<view class="" v-else>
						<view class="rateBoxTitle">{{ i18n.ctwfont4 }}</view>
						<view class="rateBoxItem" v-for="(item, index) in rateList" :key="index" :style="{ color: rateColor === item.id ? '#C9CEDE' : '#7B83A4' }">
							<view>{{ item.title }}</view>
							<view style="display: flex; justify-content: space-between;">
								<view style="text-align: right;">
									{{ cardArrList[item.id][`startSection${item.id + 1}`] }} - {{ cardArrList[item.id][`endSection${item.id + 1}`] }} {{ i18n.ctwfont9 }}
								</view>
								<view style="text-align: left; minWidth: 140px; maxWidth: 170px; margin-left: 5px;">
									{{ i18n.ctwfont20 }} = {{ cardArrList[item.id][`exchangeRate${item.id + 1}`] }} {{ i18n.ctwfont3 }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 输入框 -->
				<view class="rateInput" v-show="!TimeisShow">
					<view class="rateInputTitle">{{ i18n.ctwfont13 }}</view>
					<view class="inputBox">
						<uni-easyinput v-model="value" type="text" :clearable="false" :disabled="true" :placeholder="i18n.ctwfont21"></uni-easyinput>
						<view class="iconbiao" v-show="focusTisOks">|</view>
						<uni-easyinput
							style="opacity: 0; position: absolute; left: 0;"
							v-model="value3"
							type="number"
							@focus="focusT"
							@blur="blurT"
							:clearable="false"
							@input="cInpout"
							:placeholder="i18n.ctwfont21"
						></uni-easyinput>
						<view class="inputBoxtext">{{ i18n.ctwfont9 }}</view>
					</view>
					<view class="inputBox">
						<view class="inputBoxZho">
							<view style="font-size: $uni-font-size-custom-d; color: #ACCCFD;">{{ i18n.ctwfont15 }}</view>
							<view style="margin-right: 10px;">{{ ratenum }}</view>
						</view>
						<view class="inputBoxtext">{{ i18n.ctwfont3 }}</view>
					</view>
					<view class="inputBox" style="margin-bottom: 10px;">
						<uni-easyinput v-model="value2" type="text" :clearable="false" :disabled="true" :placeholder="i18n.ctwfont21"></uni-easyinput>
						<view class="iconbiao" v-show="focusBisOks">|</view>
						<uni-easyinput
							style="opacity: 0; position: absolute; left: 0;"
							v-model="value4"
							@focus="focusB"
							@blur="blurB"
							type="number"
							:clearable="false"
							@input="tInpout"
							:placeholder="i18n.ctwfont21"
						></uni-easyinput>
						<view class="inputBoxtext">{{ i18n.ctwfont3 }}</view>
					</view>
				</view>
			</view>
			<!-- 说明 -->
			<view class="shuominBottom">
				<view class="shuominBottomText">{{ i18n.ctwfont16 }}</view>
				<view class="shuominBottomText">{{ i18n.ctwfont16_1 }}</view>
				<view class="shuominBottomText">{{ i18n.ctwfont17 }}</view>
				<view class="shuominBottomText">{{ i18n.ctwfont17_1 }}</view>
				<view class="shuominBottomText">{{ i18n.ctwfont18 }}</view>
				<view class="shuominBottomText">{{ i18n.ctwfont18_1 }}</view>
				<view class="shuominBottomText">{{ i18n.ctwfont19 }}</view>
			</view>
		</view>
		<!-- 设置 -->
		<uni-popup ref="SetUpPopup" type="center" :animation="false"><set-up-pages ref="showPopup" @closePopUp="closePopUp" /></uni-popup>
		<!-- 退出 -->
		<sign-out ref="signOutBox" />
		<!-- 底部菜单 -->
		<bottom-pages :isFixed="true"></bottom-pages>
	</view>
</template>

<script>
import setUpPages from '@/pages/setUpPages/index.vue';
import signOut from '@/pages/setUpPages/signOut.vue'; // 退出登录
import bottomPages from '@/pages/home/bottomPages.vue'; // 底部
import baseFont from '@/utils/baseFont.js';
import { getStorage } from '@/utils/setStorage.js';
export default {
	extends: baseFont,
	data: function() {
		return {
			topBarHeight: 0, // 导航栏高度
			back_k: 0,
			popupIsShow: false, // 打开设置的标识
			signOutShow: false, // 退出登录
			rateColor: 0, // 选中的汇率
			ratenum: 0,
			cardArrList: [
				{
					startSection1: 0,
					endSection1: 0,
					exchangeRate1: 0
				},
				{
					startSection2: 0,
					endSection2: 0,
					exchangeRate2: 0
				},
				{
					startSection3: 0,
					endSection3: 0,
					exchangeRate3: 0
				},
				{
					startSection4: 0,
					endSection4: 0,
					exchangeRate4: 0
				}
			], // 数据
			value: '',
			value2: '',
			value3: '',
			value4: '',
			focusTisOks: false,
			focusBisOks: false,
			enableDate: '', // 结束时间
			disableDate: '', // 开始时间
			TimeisShow: true // 是否在时间段显示
		};
	},
	onShow() {
		this.getList();
	},
	onLoad() {
		// 拦截物理返回键
		this.goBackBox();
	},
	onUnload() {
		uni.$off('goBack_k', this.goBackBox2);
	},
	created() {
		const that = this;
		uni.getSystemInfo({
			success(res) {
				that.topBarHeight = res.statusBarHeight;
			}
		});
	},
	onHide() {
		this.$refs.SetUpPopup.close();
		this.popupIsShow = false;
		this.$refs.signOutBox.close();
	},
	components: { setUpPages, signOut, bottomPages },
	computed: {
		topBar() {
			let num = 0;
			num = this.topBarHeight + 44; // 44是顶部高度
			return num + 'px';
		},
		i18n() {
			return this.$t('exchangeRate');
		},
		rateList() {
			const arr = [
				{ id: 0, title: this.$t('exchangeRate').ctwfont5 },
				{ id: 1, title: this.$t('exchangeRate').ctwfont6 },
				{ id: 2, title: this.$t('exchangeRate').ctwfont7 },
				{ id: 3, title: this.$t('exchangeRate').ctwfont8 }
			];
			return arr;
		}
	},
	methods: {
		// 返回home
		goHome() {
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: '/pages/home/index'
			});
			// #endif
			// #ifdef H5
			this.$Router.push('/pages/home/index');
			// #endif
		},
		goBackBox() {
			// const that = this;
			uni.$on('goBack_k', this.goBackBox2);
		},
		goBackBox2(data) {
			this.back_k < 0 ? (this.back_k = 0) : (this.back_k = this.back_k);
			if (data) {
				let main = plus.android.runtimeMainActivity();
				if (this.back_k > 0) {
					this.back_k = 0;
					return main.moveTaskToBack(false);
					// return plus.runtime.quit();
				} else {
					const pages = getCurrentPages();
					if (pages.length === 1) {
						this.back_k++;
						setTimeout(() => {
							this.back_k--;
						}, 1000);
						// #ifdef APP-PLUS
						uni.redirectTo({
							url: '/pages/home/index'
						});
						// #endif
						// #ifdef H5
						this.$Router.push('/pages/home/index');
						// #endif
						// uni.showToast({
						// 	title: '再按一次退出应用',
						// 	icon: 'none',
						// 	duration: 1000
						// });
					}
				}
			}
		},
		// 获取数据
		async getList() {
			const user = JSON.parse(getStorage('userconter'));
			const params = {
				customerCode: user.customerCode
			};
			const { data: res } = await this.$http(true, 'api/E3/rateInfo', params, 'GET');
			if (res.errno === 0) {
				this.cardArrList.forEach(item => {
					const arr2 = Object.keys(item);
					arr2.forEach(item2 => {
						var reg = /exchangeRate/;
						if (reg.test(item2)) {
							item[item2] = res.data[item2];
						} else {
							item[item2] = this.computedNum(res.data[item2]);
						}
					});
				});
				this.enableDate = res.data.disableDate;
				this.disableDate = res.data.enableDate;
				// 判断是否在时间段内
				const newDateBox = new Date();
				if (newDateBox.getTime() >= this.formatDate(this.disableDate) && newDateBox.getTime() <= this.formatDate(this.enableDate)) {
					this.TimeisShow = false;
				} else {
					this.TimeisShow = true;
				}
				this.qierate();
			} else {
				uni.showToast({
					title: res.errmsg,
					icon: 'none',
					position: 'top'
				});
			}
		},
		focusT() {
			this.focusTisOks = true;
			this.value2 = '';
			this.value4 = '';
			this.value = '';
			this.value3 = '';
		},
		focusB() {
			this.focusBisOks = true;
			this.value = '';
			this.value3 = '';
			this.value2 = '';
			this.value4 = '';
		},
		blurT() {
			this.focusTisOks = false;
		},
		blurB() {
			this.focusBisOks = false;
		},
		// 元
		cInpout(e) {
			this.value = this.computedNum(e);
			if (e === '' || e < 0) {
				this.value2 = '';
				this.value = '';
				this.value3 = '';
				this.value4 = '';
			} else {
				this.cardArrList.forEach((item, index) => {
					if (e >= Number(this.removeComma(item[`startSection${index + 1}`]))) {
						const num = e * this.removeComma(item[`exchangeRate${index + 1}`]);
						if(e == 1) {
							this.value2 = Number(item[`exchangeRate${index + 1}`]);
							this.value3 = Number(item[`exchangeRate${index + 1}`]);
						} else {
							this.value2 = this.computedNum(num.toFixed(2));
							this.value3 = this.removeComma(num.toFixed(2));
						}
						this.rateColor = index;
					}
				});
				this.qierate();
			}
		},
		// 三位分节法
		computedNum(nstr) {
			if (nstr !== '') {
				{
					nstr += '';
					var x = nstr.split('.');
					var x1 = x[0];
					var x2 = x.length > 1 ? '.' + x[1] : '';
					var rgx = /(\d+)(\d{3})/;
					while (rgx.test(x1)) {
						x1 = x1.replace(rgx, '$1' + ',' + '$2');
					}
					return x1 + x2;
				}
			}
		},
		// 去掉逗号转数字
		removeComma(num) {
			if (typeof num === 'string') {
				const ter = num.replace(/,/g, '');
				return ter;
			} else {
				return num;
			}
		},
		// 泰铢
		tInpout(e) {
			this.value2 = this.computedNum(e);
			if (e === '' || e < 0) {
				this.value = '';
				this.value2 = '';
				this.value4 = '';
				this.value3 = '';
			} else {
				this.cardArrList.forEach((item, index) => {
					if (e >= Number(this.removeComma(item[`startSection${index + 1}`]))) {
						const num = e / this.removeComma(item[`exchangeRate${index + 1}`]);
						this.value = this.computedNum(num.toFixed(2));
						this.value4 = this.removeComma(num.toFixed(2));
						this.rateColor = index;
					}
				});
				this.qierate();
			}
		},
		// 打开设置
		showSetUp() {
			this.$refs.SetUpPopup.open('right');
			this.popupIsShow = true;
		},
		// 关闭设置
		closePopUp(val) {
			if (val) {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
			} else {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
				this.$refs.signOutBox.open();
				this.signOutShow = true;
			}
		},
		// 时间处理
		formatDate(value) {
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					const dt = new Date(value);
					return dt.getTime();
					break;
				case 'ios':
					var reg = new RegExp('-', 'g');
					const dt2 = new Date(value.replace(reg, '/'));
					return dt2.getTime();
					break;
			}
		},
		// 切换汇率
		qierate() {
			this.ratenum = this.cardArrList[this.rateColor][`exchangeRate${this.rateColor + 1}`];
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .uni-easyinput__content {
	min-height: 30px;
	padding: 0 5px;
	text-align: right;
	border: 1px solid #808080;
	// border-bottom-right-radius: 0;
	// border-top-right-radius: 0;
}
::v-deep .is-disabled {
	background-color: #fff !important;
	color: #333;
}
.titleImg {
	width: 60px;
	height: 30px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}
.leftIconBox {
	width: 25px;
	height: 25px;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 15px;
}
.topBox {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	// 顶部部分
	.status_bar {
		height: var(--status-bar-height);
		background-color: #CD001B;
		width: 100%;
	}
}
.zhuti {
	padding: 0 15px;
	box-sizing: border-box;
	.neironBoxTitle {
		padding: 15px 0;
		font-size: $uni-font-size-custom-e;
		font-weight: 700;
		color: #CD001B;
	}
	.bigBox {
		padding: 20px 10px;
		box-sizing: border-box;
		border-radius: 3px;
		box-shadow: 0 3px 5px 1px #e3e3e3;
		.rateTitle {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.rateTitleL {
				font-size: $uni-font-size-custom-b;
				font-weight: 700;
				color: #424451;
			}
			.rateTitleR {
				display: flex;
				flex-direction: column;
				justify-content: center;
				// align-items: center;
				font-size: $uni-font-size-custom-a;
				color: #e46171;
				line-height: 12px;
				text-align: right;
			}
		}
		.rateBox {
			margin-top: 15px;
			padding: 5px;
			border-radius: 5px;
			background-color: #CD001B;
			.rateBoxTitle {
				font-size: $uni-font-size-custom-b;
				color: #acccfd;
				font-weight: 700px;
				word-break: break-all; // 强制换行
				text-align: center;
				margin-bottom: 5px;
			}
			.rateBoxItem {
				font-size: $uni-font-size-custom-h;
				padding: 1px 0;
				// line-height: 16px;
				color: #7b83a4;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.TimeisShowBox {
				font-size: $uni-font-size-custom-d;
				height: 100px;
			}
		}
		.rateInput {
			margin-top: 15px;
			.rateInputTitle {
				font-size: $uni-font-size-custom-b;
				color: #686a74;
			}
			.inputBox {
				position: relative;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.iconbiao {
					position: absolute;
					right: 118rpx;
					transform: scale(1.5);
					-webkit-animation: twinkling 1s infinite ease-in-out;
				}
				.animated {
					-webkit-animation-duration: 1s;
					animation-duration: 1s;
					-webkit-animation-fill-mode: both;
					animation-fill-mode: both;
				}
				@-webkit-keyframes twinkling {
					0% {
						opacity: 0;
					}
					50% {
						opacity: 0.5;
					}
					100% {
						opacity: 1;
					}
				}
				@keyframes twinkling {
					0% {
						opacity: 0;
					}
					50% {
						opacity: 0.5;
					}
					100% {
						opacity: 1;
					}
				}
				.inputBoxtext {
					width: 75rpx;
					font-size: $uni-font-size-custom-b;
					color: #686a74;
					margin-left: 10px;
				}
				.inputBoxZho {
					flex: 1;
					height: 30px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: $uni-font-size-custom-b;
					color: #686a74;
				}
			}
		}
	}
	.shuominBottom {
		padding: 20px 0;
		font-size: $uni-font-size-custom-b;
		color: #686a74;
		font-weight: 700;
		.shuominBottomText {
			word-break: break-all; // 强制换行
		}
	}
}
</style>
